<template>
  <div class="bg_view">
    <div class="reg_box1">
      <img src="@/assets/img/bg_1@2x.png" alt=""/>
      <div class="title1">
        <div class="left">
          <span v-if="detail.status == -1"> 已取消 </span>
          <span v-if="detail.status == 0"> 待支付 </span>
          <span v-if="detail.status == 1"> 审核中 </span>
          <span v-if="detail.status == 2"> 待发货 </span>
          <span v-if="detail.status == 3 || detail.status == 4">
            审核驳回
          </span>
          <span
            v-if="detail.status == 7 || detail.status == 5"
          >
            已发货
          </span>
          <span v-if="detail.status == 10">已完成 </span>
        </div>

        <div class="right" v-if="detail.status == 0">
          请在{{ countdowntime }}完成支付，超时自动取消&#x3000;
        </div>
      </div>
      <div class="title2" v-if="detail.status == 3 || detail.status == 4">
        驳回原因:{{ detail.reason }}
      </div>
    </div>
    <div
      class="reg_box2"
      style="margin-bottom: 0.75rem"
      :style="{
        top: detail.status == 3 || detail.status == 4 ? '-50px' : '-80px',
      }"
    >
      <div
        class="head_box"
        v-if="detail.status == 7 || detail.status == 5 || detail.status == 10"
      >
        <img src="@/assets/img/kd.png" alt=""/>
        <div class="copy" @click="copyText()">复制</div>
        <div class="head_box_1">
          <div>
            {{ detail.expressCompany }}&#x3000;
            <span style="color: #a4adbe" id="text">{{ detail.expressNo }}</span>
            <input type="text" id="input"/>
          </div>
        </div>
      </div>
      <div class="head_box">
        <img src="@/assets/img/dizhi.png" alt=""/>
        <div class="head_box_1">
          <div>
            {{ detail.expressReceiver }}&#x3000;
            <span style="color: #a4adbe">{{ detail.expressPhone }}</span>
          </div>
          <div>
            {{
              detail.expressProvince +
              detail.expressCity +
              detail.expressArea +
              detail.expressAddress
            }}
          </div>
        </div>
      </div>
    </div>
    <div
      class="reg_box2"
      :style="{
        top: detail.status == 3 || detail.status == 4 ? '-50px' : '-80px',
      }"
    >
      <div class="title_box"><span class="dot"></span>就诊人信息</div>
      <div class="info_box">
        <div class="left">患者姓名：</div>
        <div class="right">
          {{ detail.patientName }}
        </div>
      </div>
      <div class="info_box">
        <div class="left">证件号码：</div>
        <div class="right">{{ detail.idNo }}</div>
      </div>
      <div class="info_box">
        <div class="left">住院号：</div>
        <div class="right">{{ detail.inpatientNo }}</div>
      </div>
      <div class="title_box"><span class="dot"></span>办理方式</div>
      <div class="info_box">
        <div class="right">
          <span v-if="detail.method == 1">本人办理</span>
          <span v-if="detail.method == 2">他人办理</span>
          <span v-if="detail.method == 3">保险机构代办</span>
          <span v-if="detail.method == 4">儿童办理</span>
        </div>
      </div>
      <template v-if="detail.method != 4">
        <div>
          <div class="title_box"><span class="dot"></span>本人证件</div>
          <div class="img_box">
            <div>
              <img :src="detail.patientIdNo1" alt=""/>
            </div>
            <div>
              <img :src="detail.patientIdNo2" alt=""/>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div>
          <div class="title_box"><span class="dot"></span>儿童患者相关证明</div>
          <div class="img_box">
            <div>
              <img :src="detail.patientIdNo1" alt=""/>
            </div>
            <div>
              <img :src="detail.patientIdNo2" alt=""/>
            </div>
          </div>
        </div>
      </template>
      <template v-if="detail.method != 1">
        <div>
          <div class="title_box">
            <span class="dot"></span
            >
            <template v-if="detail.method == 2">委托代理人证件</template>
            <template v-if="detail.method == 3">保险合同复印件</template>
            <template v-if="detail.method == 4">亲属证件</template>
          </div>
          <div class="img_box">
            <div>
              <img :src="detail.agentIdNo1" alt=""/>
            </div>
            <div>
              <img :src="detail.agentIdNo2" alt=""/>
            </div>
          </div>
        </div>
      </template>
      <template v-if="detail.method == 3">
        <div>
          <div class="title_box"><span class="dot"></span>委托代理证书</div>
          <div class="img_box">
            <div>
              <img :src="detail.agentBook" alt=""/>
            </div>
            <div></div>
            <div></div>
          </div>
        </div>
      </template>

      <div class="title_box"><span class="dot"></span>复印病历</div>
      <div class="info_box">
        <div class="left">就诊科室：</div>
        <div class="right">{{ detail.patientDept }}</div>
      </div>
      <div class="info_box">
        <div class="left">就诊医生：</div>
        <div class="right">{{ detail.patientDoctor }}</div>
      </div>
      <div class="info_box">
        <div class="left">入院时间：</div>
        <div class="right">{{ detail.patientInDate }}</div>
      </div>
      <div class="info_box">
        <div class="left">出院时间：</div>
        <div class="right">{{ detail.patientOutDate }}</div>
      </div>
      <div class="title_box"><span class="dot"></span>复印详情</div>
      <div class="info_box">
        <div class="left">复印份数：</div>
        <div class="right">1</div>
      </div>
      <!-- <div class="info_box">
        <div class="left">复印用途：</div>
        <div class="right">{{ detail.purpose }}</div>
      </div> -->
      <div class="info_box">
        <div class="left">备&#x3000;&#x3000;注：</div>
        <div class="right">{{ detail.remark }}</div>
      </div>
      <div class="title_box"><span class="dot"></span>订单详情</div>
      <div class="info_box">
        <div class="left">订单编号：</div>
        <div class="right">{{ detail.payOrderId }}</div>
      </div>
      <div class="info_box">
        <div class="left">复印押金：</div>
        <div class="right">￥{{ detail.deposit }}</div>
      </div>
      <template v-if="detail.status == 0">
        <div class="info_box">
          <div class="left">申请时间：</div>
          <div class="right">{{ detail.createTime | YYYYMMDDhhmmss }}</div>
        </div>
      </template>
      <template v-if="detail.status == -1">
        <div class="info_box">
          <div class="left">申请时间：</div>
          <div class="right">{{ detail.createTime | YYYYMMDDhhmmss }}</div>
        </div>
        <div class="info_box">
          <div class="left">取消时间：</div>
          <div class="right">{{ detail.updateTime | YYYYMMDDhhmmss }}</div>
        </div>
      </template>
      <template v-if="detail.status != 0 && detail.status != -1">
        <div class="info_box">
          <div class="left">支付时间：</div>
          <div class="right">{{ detail.payTime | YYYYMMDDhhmmss }}</div>
        </div>
        <div class="info_box">
          <div class="left">支付渠道：</div>
          <div class="right">微信</div>
        </div>
      </template>
      <template
        v-if="
          detail.status == 3 ||
          detail.status == 4 ||
          detail.status == 5 ||
          detail.status == 7
        "
      >
        <div class="info_box">
          <div class="left">退回金额：</div>
          <div class="right">￥{{ detail.refundAmount }}</div>
        </div>
        <div class="info_box">
          <div class="left">退回时间：</div>
          <div class="right">{{ detail.refundTime | YYYYMMDDhhmmss }}</div>
        </div>
      </template>
    </div>
    <div class="unpayBox" v-if="detail.status == 0">
      <div>&#x3000;押金: <span style="color: #f62d40">￥200.00</span></div>
      <div>
        <div class="unpayBox_btn unpayBox_cancel" @click="Cancel()">
          取消申请
        </div>
        <div class="unpayBox_btn unpayBox_pay" @click="goPay()">立即支付</div>
      </div>
    </div>
  </div>
</template>
<script>
import {recordCopydetail, recordCopyCancel, payCreate, jeepayCreate} from "@/api/api";

export default {
  data() {
    return {
      info: {},
      detail: {},
      countdowntime: "",
      timer: null
    };
  },
  created() {
    this.info = this.$route.query;
    this.recordCopydetail();
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    async recordCopydetail() {
      var data = {
        id: this.info.id,
      };
      await recordCopydetail(data).then((res) => {
        if (res.code == 200) {
          this.detail = res.data;
          if (this.detail.status == 0) {
            this.countdown(this.detail.createTime);
          }
        }
      });
      // console.log(this.countdowntime)
    },
    goPay() {
      // 获取微信配置
      this.payCreate();
    },
    payCreate() {

      jeepayCreate({
        orderType: "3",
        orderId: this.detail.orderId,
        openId: window.localStorage.getItem("openId"),
      }).then((res) => {
        if (res.code == 200) {
          // 调起微信支付
          let resData=res.data
          this.wxPay(resData);
        } else {
          alert(res.message);
          if (res.code == 1355) {

          }
        }
      });
    },
    // 发起微信支付
    wxPay(data) {
      const that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: data.appId, //公众号名称，由商户传入
          timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: data.nonceStr, //随机串
          package: data.package,
          signType: data.signType, //微信签名方式：
          paySign: data.paySign, //微信签名
        },
        function (response) {
          //TODO 应该再进行一次查单验证来保证支付成功
          if (response.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回get_brand_wcpay_request:ok，但并不保证它绝对可靠。
            that.$vux.toast.show({
              text: "支付成功",
              type: "success",
            });
            setTimeout(() => {
              that.recordCopydetail();
            }, 2000);
          } else {
            that.$vux.toast.show("支付失败");
          }
        }
      );
    },
    Cancel() {
      const that = this;
      that.$vux.confirm.show({
        // 组件除show外的属性
        content: "确定取消该申请?",
        onCancel() {
        },
        onConfirm() {
          that.recordCopyCancel();
        },
      });
    },
    recordCopyCancel() {
      recordCopyCancel({
        id: this.detail.id,
      }).then((res) => {
        if (res.code == 200) {
          this.recordCopydetail();
          this.$vux.toast.show("取消申请成功");
        }
      });
    },
    // 30分钟倒计时
    countdown(orderDate) {
      //orderDate是订单生效时间，后台的Date类型传到前端成了毫秒
      const that = this;

      var now = new Date().getTime();
      var end = new Date(orderDate + 30 * 60 * 1000).getTime(); //提交订单的时间+30min就是订单失效时间，后台Date传过来变成了毫秒
      console.log(now);
      console.log(end);
      /*两个时间相减,得到的是毫秒ms,变成秒*/
      var result = Math.floor(end - now) / 1000; //result= 30*60s;
      this.timer = setInterval(sub, 1000); //定时器 调度对象
      console.log(result);

      /*封装减1秒的函数*/
      function sub() {
        if (result > 1) {
          result = result - 1;
          var second = Math.floor(result % 60); // 计算秒 ，取余
          var minite = Math.floor((result / 60) % 60); //计算分 ，换算有多少分，取余，余出多少秒
          //var hour = Math.floor(result/1000/60/60%24);  //计算小时，这里最长只有30min，用不着
          //var day = Math.floor(result/1000/60/60/24);   //计算天，这里最长只有30min，用不着
          var countTime = minite + "分" + second + "秒";
          console.log();
          //  callback(countTime)
          that.countdowntime = countTime;
        } else {
          //这里可以添加倒计时结束后需要执行的事件
          // alert("未在规定时间内支付，订单已失效！");
          that.recordCopydetail();
          window.clearInterval(timer);
          //TODO 订单失效后的一些列操作：更改订单状态的同时回库存
        }
      }
    },
    copyText() {
      var text = document.getElementById("text").innerText;
      var input = document.getElementById("input");
      input.value = text; // 修改文本框的内容
      input.select(); // 选中文本
      document.execCommand("copy"); // 执行浏览器复制命令
      alert("复制成功");
    },
  },
  filters: {
    YYYYMMDDhhmmss(timestamp) {
      let time = new Date(timestamp);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minute = time.getMinutes();
      let second = time.getSeconds();

      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minute +
        ":" +
        second
      );
    },
    timefun(time) {
      if (time) {
        var newTime = time.slice(0, 2) + ":" + time.slice(2);
        newTime =
          newTime.slice(0, newTime.length - 2) +
          ":" +
          newTime.slice(newTime.length - 2);
        return newTime;
      }
    },
  },
};
</script>
<style scoped>
.reg_box1 {
  width: 100%;
  height: 142px;
  position: relative;
  color: #fff;
}

.reg_box1 > div {
  position: relative;
  margin-left: 16px;
}

.reg_box1 .title1 {
  font-size: 17px;
  font-weight: bold;
  color: #ffffff;
  line-height: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reg_box1 .title1 .right {
  font-size: 13px;
}

.reg_box1 .title2 {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 42px;
}

.reg_box1 .time {
  font-size: 14px;
  /* font-weight: bold; */
  color: #ffffff;
  line-height: 42px;
}

.reg_box1 img {
  width: 100%;
  height: 100%;
  position: absolute;
}

.reg_box2 {
  width: calc(100% - 64px);
  padding: 16px;
  margin: 0px auto;
  position: relative;
  /* top: -3.125rem; */
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(7, 62, 145, 0.24);
  border-radius: 5px;
}

.reg_box2 .title_box {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #131a2a;
  line-height: 42px;
}

.reg_box2 .title_box .dot {
  width: 3px;
  height: 15px;
  background: #448eff;
  border-radius: 2px;
  margin-right: 12px;
}

.reg_box2 .info_box {
  display: flex;
  line-height: 26px;
  margin: 5px 0;
}

.reg_box2 .info_box .left {
  width: 80px;
  color: #a4adbe;
  font-size: 14px;
  text-align-last: justify;
}

.reg_box2 .info_box .right {
  width: calc(100% - 80px);
  word-wrap: break-word;
  word-break: normal;
  font-size: 15px;
}

.img_box {
  width: 100%;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}

.img_box > div {
  width: calc(100% / 2);
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img_box > div > img {
  width: 10.125rem;
  height: 6.875rem;
  object-fit: contain;
}

.head_box {
  display: flex;
  align-items: center;
  height: 60px;
  position: relative;
}

.head_box > img {
  width: 2.25rem;
  height: 2.25rem;
  margin-right: 0.625rem;
}

.head_box_1 {
  font-size: 0.9375rem;
}

.head_box_1 > div {
  line-height: 1.5rem;
}

.head_box .copy {
  position: absolute;
  right: 1rem;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #4790ff;
}

.btn_box {
  height: 55px;
  width: 100%;

  display: flex;
  position: fixed;
  bottom: 0;

  background: #ffffff;
  box-shadow: 0px 0px 13px 0px rgba(181, 189, 197, 0.28);
}

.btn_box > div {
  width: 100%;
  height: 100%;
  line-height: 55px;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}

.btn_box .btn_box_1 {
  color: #448eff;
}

.btn_box .btn_box_2 {
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  color: #fff;
}

#input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -10;
}

.unpayBox {
  display: flex;
  width: 100%;
  height: 3.4375rem;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
}

.unpayBox > div {
  display: flex;
  align-items: center;
}

.unpayBox_btn {
  width: 93px;
  height: 2.375rem;
  background-color: #fff;
  margin-right: 1rem;
  border-radius: 3px;
  font-size: 1.125rem;
  line-height: 2.375rem;
  text-align: center;
}

.unpayBox_pay {
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  color: #fff;
}

.unpayBox_cancel {
  border: 1px solid #949fb4;
  color: #949fb4;
}
</style>
